<template>
  <div>
    <!--操作-->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="handleAddUser">新增<i class="el-icon-circle-plus-outline"></i></el-button>
    </div>
    <!--表格主体-->
    <el-table :data="userListData" border stripe header-cell-class-name="headerBg">
      <el-table-column prop="userId" label="id" width="40" align="center" v-if="false">
      </el-table-column>
      <el-table-column prop="userName" label="用户名称" align="center">
      </el-table-column>
      <el-table-column prop="password" label="用户密码" align="center">
      </el-table-column>
      <el-table-column prop="" label="操作" width="175" align="center">
        <template v-slot="scope">
          <el-button type="success" @click="handleUpdateUser(scope.row)" class="mr-5">编辑<i class="el-icon-edit"></i></el-button>
          <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="deleteUser(scope.row.userId)"
              class="ml-5"
          >
            <el-button type="danger" slot="reference">删除<i class="el-icon-delete"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--弹出框 新增用户-->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisibleForAdd" width="30%">
      <el-form label-width="70px" size="small">
        <el-form-item label="账号">
          <el-input v-model="user.loginName"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <template>
            <el-select v-model="user.sex" placeholder="请选择">
              <el-option
                  v-for="item in sexList"
                  :key="item.sex"
                  :label="item.label"
                  :value="item.sex">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="cancelAddOrUpdateUser">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>

    <!--弹出框 修改用户-->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisibleForUpdate" width="30%">
      <el-form label-width="70px" size="small">
        <el-form-item label="用户名">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <template>
              <el-radio-group v-model="user.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="cancelAddOrUpdateUser">取 消</el-button>
        <el-button type="primary" @click="updateUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      sexList: [{
        sex: '1',
        label: '男'
      }, {
        sex: '0',
        label: '女'
      }],
      // sex: '1',
      userListData: [],                       // 用户数据列表
      user: {},                               // 用户 数据对象
      dialogFormVisibleForAdd: false,         // 控制新增用户弹出框 false 不可见 不弹出
      dialogFormVisibleForUpdate: false,      // 控制修改用户弹出框
    }
  },
  created() {
    this.loadPageData();
  },
  methods: {
    loadPageData() {
      this.request.get("/mcj/tUser/getAllUser").then(res => {
        this.userListData = res.data;
      })
    },
    handleAddUser() {         // 控制新增用户弹出框
      this.dialogFormVisibleForAdd = true;// 弹出框
      this.user = {};               // 框内元素赋值
    },
    addUser() {       // 完成新增用户操作
      this.request.post("/mcj/tUser/addUser", this.user).then(res => {
        if (res.success) {
          this.$message.success("操作成功");
          this.dialogFormVisibleForAdd = false;
          this.loadPageData();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleUpdateUser(row) {   // 控制修改用户弹出框
      this.dialogFormVisibleForUpdate = true;
      this.user = JSON.parse(JSON.stringify(row));      // 将行数据解析一遍 避免双向绑定的数据影响
      // this.sex = this.user.sex;
      // console.log(this.sex)
    },
    updateUser() {
      this.request.post("/mcj/tUser/updateUser", this.user).then(res => {
        if (res.success) {
          this.$message.success("操作成功");
          this.dialogFormVisibleForUpdate = false;
          this.loadPageData();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    deleteUser(userId) {            // 完成删除用户操作
      this.request.delete("/mcj/tUser/deleteUser/" + userId).then(res => {
        if (res.success) {
          this.$message.success("操作成功");
          this.loadPageData();
        } else {
          this.$message.error("操作失败，请重试");
        }
      })
    },
    cancelAddOrUpdateUser() {
      this.$message.info("已取消操作")
      this.dialogFormVisibleForAdd = false;
      this.dialogFormVisibleForUpdate = false;
    },
  }
}
</script>

<style>
.headerBg {
  background-color: #ccc !important;
}
</style>
